<template>
  <div id="app">
    <router-view />
    <el-dialog
      v-dialogDrag
      width="40%"
      title="初始密码修改"
      :show-close="false"
      :visible="dialogFirstLoginVisible"
      custom-class="center-dialog"
    >
      <el-steps :active="active">
        <el-step title="初次登录" />
        <el-step title="修改初始密码" />
        <el-step title="完成" />
      </el-steps>
      <div v-if="active == 1" class="topTip">
        您好，为了您的账号安全，请点击下一步修改初始密码
      </div>
      <div
        v-if="active != 3"
        style="width: 100%; margin: 10px auto 20px; text-align: center"
      >
        <el-form
          ref="firstLoginFormRef"
          :model="firstLoginForm"
          :rules="rules2"
          label-width="120px"
        >
          <el-row v-show="active == 1">
            <el-col :span="24">
              <el-form-item label="用户名：">
                <el-input
                  v-model="userInfo.userName"
                  :disabled="false"
                  readonly
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="active == 2">
            <el-col :span="24">
              <el-form-item label="旧密码" prop="oldPassword">
                <el-input
                  v-model="firstLoginForm.oldPassword"
                  placeholder="请输入旧密码"
                  maxlength="50"
                  type="password"
                  show-password
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="新密码" prop="newPassword">
                <el-popover
                  ref="popover"
                  placement="right"
                  width="300"
                  trigger="focus"
                  v-if="false"
                >
                  <span>
                    必须使用字母、数字和特殊字符组成强口令，<br />长度不小于6个字符，不超过15个字符，注意不要使用空格。
                  </span>
                  <el-input
                    slot="reference"
                    v-model="firstLoginForm.newPassword"
                    placeholder="请输入密码"
                    maxlength="50"
                    type="password"
                    show-password
                  />
                </el-popover>
                <el-input
                  v-model="firstLoginForm.newPassword"
                  placeholder="请输入密码"
                  maxlength="50"
                  type="password"
                  show-password
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input
                  v-model="firstLoginForm.confirmPassword"
                  placeholder="请输入密码"
                  maxlength="50"
                  type="password"
                  show-password
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-if="active != 1" slot="footer" class="dialog-footer">
          <el-button @click="resetForm('form')">上一步</el-button>
          <el-button
            type="primary"
            @click="submitFirstLoginForm('firstLoginFormRef')"
            >下一步</el-button
          >
        </div>
        <div v-else slot="footer" class="dialog-footer">
          <el-button type="primary" @click="nextTip">下一步</el-button>
        </div>
      </div>
      <div v-if="active === 3" class="ImgTip">
        <div style="margin: 20px 0">
          <svg-icon
            v-if="isSuccess === true"
            icon-class="pwdSuccess"
            style="font-size: 40px"
          />
          <svg-icon v-else icon-class="pwdFail" style="font-size: 40px" />
        </div>
        <p v-if="isSuccess === true">修改密码成功</p>
        <p v-else>网络开小差了，导致密码修改失败，请重新修改</p>
        <el-button
          v-if="isSuccess === true"
          type="primary"
          @click="returnDialogTableVisible"
          >重新登录</el-button
        >
        <el-button v-else type="primary" @click="again">重新修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBackIdentify } from "@/api/identity/identify";
import { getToken } from "@/utils/auth";
import { updateUserPwd, updateUserProfile } from "@/api/system/user";
export default {
  name: "App",
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        return title
          ? `${title} - ${process.env.VUE_APP_TITLE}`
          : process.env.VUE_APP_TITLE;
      },
    };
  },

  data() {
    const validatePassword = (rule, value, callback) => {
      let mode = 0;
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (value.length < 6 || value.length > 15) {
        callback(new Error("长度为6-15个字符"));
      } else {
        if (/\d/.test(value)) mode++; //数字
        if (/[A-Z]/.test(value)) mode++; //大写字母
        if (/[a-z]/.test(value)) mode++; //小写字母
        if (/[\W_]/.test(value)) mode++; //特殊字符

        if (mode < 3) {
          callback(new Error("必须包含大写字母、小写字母、数字、符号3种"));
        }
        callback();
      }
    };

    const validatecheckPassword2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("确认密码不能为空"));
      } else if (value != this.firstLoginForm.newPassword) {
        callback(new Error("两次输入的密码必须一致!"));
      } else {
        callback();
      }
    };
    return {
      notify: undefined,

      // 第一次登录改密码
      firstLoginForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      isSuccess: false,
      active: 1,

      // 表单校验
      rules2: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, validator: validatePassword, trigger: "blur" },
        ],
        confirmPassword: [
          {
            required: true,
            validator: validatecheckPassword2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    dialogFirstLoginVisible() {
      return this.$store.state.user.dialogFirstLoginVisible;
    },
    userInfo() {
      return this.$store.state.user.userInfo;
    },
  },
  mounted() {
    if (getToken()) {
      // 获取超2个月退回未处理标识总数
      getBackIdentify().then((res) => {
        if (res?.data <= 0) return;
        const h = this.$createElement;
        this.notify = this.$notify({
          title: "提示",
          type: "success",
          iconClass: "el-icon-warning-outline",
          message: h("div", null, [
            h("p", {}, [
              h("span", "有"),
              h(
                "font",
                {
                  style: {
                    fontWeight: "bold",
                  },
                  attrs: {
                    color: "blue",
                  },
                },
                res.data
              ),
              h("span", {}, "个标识信息未操作，请及时处理。"),
            ]),
            h(
              "p",
              {
                style: {
                  float: "right",
                },
              },
              [
                h(
                  "el-button",
                  {
                    style: {},
                    attrs: {
                      size: "small",
                      type: "text",
                    },
                    on: {
                      click: this.closeNotify, // 路由加载之后，调用关闭消息弹窗的方法
                    },
                  },
                  "知道了"
                ),
                h(
                  "el-button",
                  {
                    style: {},
                    attrs: {
                      size: "small",
                      type: "text",
                    },
                    on: {
                      click: this.goDetail, // 路由加载之后，调用关闭消息弹窗的方法
                    },
                  },
                  "去处理"
                ),
              ]
            ),
          ]),
          duration: 0,
          dangerouslyUseHTMLString: true,
        });
      });

      //   this.$notify({
      //     title: "提示",
      //     duration: 0,
      //     type: "success",
      //     dangerouslyUseHTMLString: true,
      //     iconClass: "el-icon-warning-outline",
      //     message: `<p>有 <font color='#009A94'> <strong>${3} </strong> </font>个标识信息未操作，请及时处理。</p>
      //     <p><span style='cursor:pointer'>知道了</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='cursor:pointer' onClick='this.$router.push("/identity/identity/identity?status=3")'>去处理</span></p>
      //     `,
      //   });
    }
  },
  methods: {
    nextTip() {
      this.active += 1;
    },
    resetForm() {
      this.active -= 1;
    },
    again() {
      this.active = 1;
    },
    submitFirstLoginForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUserPwd(
            this.firstLoginForm.oldPassword,
            this.firstLoginForm.newPassword
          )
            .then((res) => {
              this.nextTip();
              if (res.code == 200) {
                this.isSuccess = true;
              } else {
                this.isSuccess = false;
              }
            })
            .then(() => {});
        }
      });
    },
    // 重新登录
    returnDialogTableVisible() {
      this.$store.dispatch("LogOut").then(() => {
        location.href = "/index";
      });
    },
    closeNotify() {
      this.notify.close();
    },
    goDetail() {
      this.$nextTick(() => {
        this.$router.replace({
          path: "/redirect/identity/identity/identity?status=3",
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.topTip {
  text-align: left;
  line-height: 30px;
  color: red;
  font-weight: 700;
  margin: 10px 0;
}

.ImgTip {
  text-align: center;
  margin: 0 auto;
  p {
    margin: 20px 0;
  }
}
</style>
